<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <todo>
            <todo-title slot="todo-title" :title="title"></todo-title>
            <todo-title slot="todo-title" :title="title"></todo-title>
            <todo-items slot="todo-items" v-for="(item,index) in todoItems" :index="index" 
            :item="item" :key="index" @remove="removeItems"></todo-items>
        </todo>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        Vue.component('todo', {
            template:'<div>\
                        <slot name="todo-title"></slot>\
                        <ul>\
                            <slot name="todo-items"></slot>\
                        </ul>\
                    </div>',
        });
        Vue.component('todo-title', {
            props: ['title'],
            template:'<div>{{ title }}</div>',
        });
        Vue.component('todo-items', {
            props:['item', 'index'],
            template:'<li>{{index}}-----{{ item }}<button @click="remove">del</button></li>',            
            methods:{
                remove: function(index){
                    this.$emit("remove", index)
                }
            }
        });

        var vm = new Vue({
            el: "#app",
            data:{
                title: 'fruits',
                todoItems: ['apple', 'banana', 'carrots']
            },
            methods: {
                currentTime1: function(){
                    return Date.now();
                },
                removeItems:function(index){
                    console.log('DEL '+this.todoItems[index]+' OK');
                    this.todoItems.splice(index,1);
                }
            },
             computed: {
                currentTime2: function(){
                    return Date.now();
                }
            },

        })
    </script>
</body>
</html>
